<template>
  <div class="login">
    <div class="ding">
      <h3 style="margin: 0">登录</h3>
      <div style="margin: 0 0 4.3vh">
        还没有账号，立即<router-link class="zc" to="/register"
          >注册</router-link>&nbsp;
        <router-link class="zc" to="/wode">返回</router-link>
      </div>
    </div>

    <van-field
      class="input"
      center
      v-model="tel"
      type="number"
      placeholder="请输入手机号"
    />

    <van-field
      class="input input2"
      v-model="password"
      center
      type="password"
      placeholder="请输入密码"
    >
      <template #button>
        <router-link style="color: #4960f7" to="/password"
          >忘记密码</router-link
        >
      </template>
    </van-field>
    <div style="text-align: center">
      <van-button
        style="border-radius: 50px; width: 81.3vw; height: 5.5vh"
        color="linear-gradient(266.23deg, #4960F7 0%, #6A97FA 100%)"
        @click="dl">
        登录
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tel: "",
      password: "",
    };
  },
  methods:{
    dl(){
      if(/^1[3-9][\d]{9}$/.test(this.tel)){
        if(/^\w{6,12}$/.test(this.password)){
          this.$router.push('/wode',this.password)
          this.$toast.success('登录成功')
        }else{
          this.$toast.fail('密码错误');
        }
      }else{
        this.$toast.fail('账号格式错误');
      }
      // query:{password:this.password}
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  .ding {
    width: 81.3vw;
    margin: 19vh auto 0;
    h3 {
      font-style: bold;
      font-size: 22px;
      color: #333333;
      text-align: left;
      padding: 0 10px 0;
    }

    div {
      font-style: normal;
      font-size: 12px;
      color: #333333;
      text-align: left;
      padding: 0 10px 0;
      .zc {
        color: #4960f7;
      }
    }
  }
  .input {
    border-radius: 50px;
    height: 5.5vh;
    width: 81.3vw;
    border: 1px solid #6a97fa;
    margin: 0 auto;
  }
  .input2 {
    margin: 4.3vh auto 8.6vh;
  }
}
</style>
